<% @page_title = @project_data[:name]
@quotas = ["VmVCpu", "PostgresVCpu"].map {
  {
    resource_type: it,
    current_resource_usage: @project.current_resource_usage(it),
    quota: @project.effective_quota_value(it)
  }
} %>

<%== part(
  "components/page_header",
  title: "Project Settings",
  back: "/project",
  breadcrumbs: [%w[Projects /project], [@project_data[:name], @project_data[:path]], %w[Settings #]]
) %>

<div class="grid gap-6">
  <!-- Detail Card -->
  <form action="<%= @project_data[:path] %>" method="POST">
    <%== csrf_tag(@project_data[:path]) %>

    <%== part(
      "components/kv_data_card",
      data: [
        ["ID", @project_data[:id]],
        (
          if has_permission?("Project:edit", @project_data[:id])
            [
              "Name",
              part(
                "components/form/text",
                name: "name",
                value: @project_data[:name],
                button_title: "Save",
                attributes: {
                  required: true
                }
              ),
              { escape: false }
            ]
          else
            ["Name", @project_data[:name]]
          end
        )
      ]
    ) %>
  </form>
  <!-- Quota Card -->
  <div class="overflow-hidden rounded-lg shadow ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200">
    <div class="px-4 py-5 sm:p-6">
      <h3 class="text-base font-semibold leading-6 text-gray-900">Quotas</h3>
      <div class="mt-2 text-sm text-gray-500">
        <p>If you want to increase your quota, please get in touch at
          <a href="mailto:support@ubicloud.com" class="font-semibold leading-6 text-orange-500 hover:text-orange-700">support@ubicloud.com</a>.</p>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <% @quotas.each do |quota| %>
        <div class="p-6">
          <%== part(
            "components/progress_bar",
            title: quota[:resource_type],
            numerator: quota[:current_resource_usage],
            denominator: quota[:quota]
          ) %>
        </div>
      <% end %>
    </div>

  </div>
  <!-- Delete Card -->
  <% if has_permission?("Project:delete", @project_data[:id]) %>
    <div class="overflow-hidden rounded-lg shadow ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200">
      <div class="px-4 py-5 sm:p-6">
        <div class="sm:flex sm:items-center sm:justify-between">
          <div>
            <h3 class="text-base font-semibold leading-6 text-gray-900">Delete project</h3>
            <div class="mt-2 text-sm text-gray-500">
              <p>This action will permanently delete this project. Deleted data cannot be recovered. Use it carefully.</p>
            </div>
          </div>
          <div class="mt-5 sm:ml-6 sm:mt-0 sm:flex sm:flex-shrink-0 sm:items-center">
            <%== part("components/delete_button", confirmation: @project_data[:name], redirect: "/project") %>
          </div>
        </div>
      </div>
    </div>
  <% end %>
</div>
